<template>
  <!-- 施工工地明细 -->
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <div class="stepContent">
        <div>
          <!-- <div class="basicTitle"> 基本信息</div>
          <hr class="hrStyle" />-->
          <el-row>
            <el-col :span="8">
              <el-form-item label="工地名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入工地名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工地类型" prop="type">
                <el-select class="fillUp" v-model="form.type" clearable placeholder="请选择工地类型">
                  <el-option
                    v-for="(v,index) in typeList"
                    :key="index"
                    :label="v.label"
                    :value="v.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="建设单位" prop="constructionUnit">
                <el-input v-model="form.constructionUnit" placeholder="请输入建设单位" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="所属省" prop="provinceCode">
                <el-select
                  class="fillUp"
                  v-model="form.provinceCode"
                  clearable
                  placeholder="请选择所属省"
                  @change="formProvinceChange"
                >
                  <el-option
                    v-for="(v,index) in provinceList"
                    :key="index"
                    :label="v.provinceName"
                    :value="v.provinceCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="所属市" prop="cityCode">
                <el-select
                  class="fillUp"
                  v-model="form.cityCode"
                  clearable
                  placeholder="请选择所属市"
                  @change="formCityChange"
                >
                  <el-option
                    v-for="(v,index) in cityList"
                    :key="index"
                    :label="v.cityName"
                    :value="v.cityCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="所属县区" prop="areaCode">
                <el-select
                  class="fillUp"
                  v-model="form.areaCode"
                  clearable
                  placeholder="请选择区域"
                  @change="formAreaChange"
                >
                  <el-option
                    v-for="(v,index) in areaList"
                    :key="index"
                    :label="v.areaName"
                    :value="v.areaCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="有效期开始日期" prop="startDate">
                <el-date-picker class="fillUp" v-model="form.startDate" placeholder="请输入有效期开始日期" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="有效期结束日期" prop="endDate">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  class="fillUp"
                  v-model="form.endDate"
                  placeholder="请输入有效期结束日期"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="施工单位" prop="constructionCompany">
                <el-input v-model="form.constructionCompany" placeholder="请输入施工单位" />
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入详细地址" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="申报人名字" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入申报人名字" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="是否报备" prop="isReportConstructionWaste">
                <el-radio-group class="fillUp" v-model="form.isReportConstructionWaste">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
                <!-- <el-select class="fillUp" v-model="form.isReportConstructionWaste" clearable placeholder="请输入是否报备建筑垃圾处理方案" >
                                  <el-option label="是" :value="1"></el-option>
                                  <el-option label="否" :value="0"></el-option>
                </el-select>-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="申报容量（m³）" prop="remark">
                <el-input type="capacity" :rows="3" v-model="form.capacity" placeholder="请输入申报容量（m³）" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注" prop="remark">
                <el-input type="text" :rows="3" v-model="form.remark" placeholder="请输入备注" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="图片" prop="logo">
                <image-upload v-model="form.logo" :limit="1" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <!-- <el-button @click="cancel">取 消</el-button> -->
    </div>
  </div>
</template>
  
  <script>
import { getToken } from "@/utils/auth";
// import { listSite, getSite, delSite, addSite, updateSite,pageSite } from "@/api/construction/site";
import { addSite, updateSite } from "@/api/construction/site";

import { provinceList, cityList, areaList } from "@/api/region/region";

export default {
  props: {
    form: {
      type: Object,
      default: {}
    },
    provinceList: {
      default: []
    }
  },
  data() {
    return {
      imageUrl: "",
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload"
      },
      active: 0,
      // 表单校验
      rules: {
        name: [
          { required: true, message: "工地名称不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "工地类型不能为空", trigger: "blur" }
        ],
      },
      cityList: [],
      areaList: [],
      typeList: [
        { value: "1", label: "房屋建筑工地" },
        { value: "2", label: "拆迁土地" },
        { value: "3", label: "收储工地" },
        { value: "4", label: "绿化园林工地" },
        { value: "5", label: "市政道路工地" },
        { value: "6", label: "地铁市政工地" },
        { value: "7", label: "企业建筑工地" },
        { value: "8", label: "房屋装修" }
      ],
      formData: {
        provinceCode: "", // 省
        provinceName: "", // 省
        cityCode: "", // 市
        cityName: "", // 市
        areaCode: "", // 区/县
        areaName: "", // 区/县
        name: "", // 工地名称
        type: "", // 工地类型  （说明：工地类型字典：1.房屋建筑工地 2.拆迁土地 3.收储工地 4.绿化园林工地	5.市政道路工地	6.地铁市政工地 7.企业建筑工地	8.房屋装修）
        startDate: "", // 有效期开始日期
        endDate: "", // 有效期结束日期
        constructionUnit: "", // 建设单位
        constructionCompany: "", // 施工单位
        userName: "", // 申报人名字
        address: "", // 详细地址
        logo: "", // 工地：
        remark: "", // 备注
        isReportConstructionWaste: "" // 是否报备建筑垃圾处理方案：0.否1.是
      }
    };
  },
  mounted() {
    if (this.form.cityCode) {
      this.initCityList(this.form.provinceCode);
    }
    if (this.form.areaCode) {
      this.initAreaList(this.form.cityCode);
    }
  },
  beforeDestroy() {},
  methods: {
    back() {
      this.active--;
    },
    next() {
      if (this.active++ > 3) this.active = 0;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSite(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.active = 0;
              this.$emit("submitForm");
              return;
              this.open = false;
              this.getList();
            });
          } else {
            addSite(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.active = 0;
              this.$emit("submitForm");

              return;
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    initProvinceList() {
      provinceList().then(response => {
        this.provinceList = response.data;
      });
    },
    initCityList(v) {
      let obj = {
        provinceCode: v
      };
      cityList(obj).then(response => {
        this.cityList = response.data;
      });
    },
    initAreaList(v) {
      let obj = {
        cityCode: v
      };
      areaList(obj).then(response => {
        this.areaList = response.data;
      });
    },
    //省份选择的
    provinceChange(v) {
      this.initCityList(v);
      this.queryParams.cityCode = null;
      this.queryParams.areaCode = null;
    },
    //省份选择的
    formProvinceChange(v) {
      this.initCityList(v);
      var obj = {};
      obj = this.provinceList.find(function(item) {
        return item.provinceCode === v;
      });
      console.log("province");
      console.log(obj);
      this.form.provinceName = "";
      if (obj && obj.provinceName) {
        this.form.provinceName = obj.provinceName;
      }

      this.cityList = [];
      this.areaList = [];

      this.form.cityCode = "";
      this.form.cityName = "";
      this.form.areaCode = "";
      this.form.areaName = "";
    },
    //城市选择的
    formCityChange(v) {
      this.initAreaList(v);
      var obj = {};
      obj = this.cityList.find(function(item) {
        return item.cityCode === v;
      });

      this.form.cityName = "";
      if (obj && obj.cityName) {
        this.form.cityName = obj.cityName;
      }

      this.form.cityCode = v;
      this.areaList = [];

      this.form.areaCode = "";
      this.form.areaName = "";
    },
    formAreaChange(v) {
      var obj = {};
      obj = this.areaList.find(function(item) {
        return item.areaCode === v;
      });
      console.log("area");
      console.log(obj);
      this.form.areaName = obj.areaName;
      this.form.areaCode = v;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      // this.$refs.upload.clearFiles();
      console.log(response, "res");
      // this.$alert(
      //   "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
      //     response.msg +
      //     "</div>",
      //   "导入结果",
      //   { dangerouslyUseHTMLString: true }
      // );
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.stepContent {
  min-height: 350px;
}
.basicTitle {
  margin: 20px 0;
  font-size: 16px;
  font-weight: bold;
}
.dialog-footer {
  text-align: right;
}

.el-step {
  .is-process {
    color: #235dc8;
    border-color: #235dc8;
  }
}
.fillUp {
  width: 100%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>